<!-- 暂未使用 -->
<script setup>
	import { ref, onMounted, nextTick } from 'vue';
	import Hammer from 'hammerjs';
	import { deleteWrong } from '@/api/exam.js';

	const props = defineProps({
		wrong: {
			type: Object,
			default: () => {},
		},
	});

	const emits = defineEmits(['delete']);

	const stack = ref();
	const isDel = ref(false);

	const hasDeleted = ref(false);

	const handleDelete = (bankId) => {
		deleteWrong(bankId);
		hasDeleted.value = true;
	};

	const createTouch = () => {
		// 创建Hammer实例并添加滑动侦听器
		const manager = new Hammer.Manager(stack.value.$el);

		const Swipe = new Hammer.Swipe();
		manager.add(Swipe);

		manager.on('swipeleft', (e) => {
			console.log('e-->', e);
			isDel.value = true;
		});

		manager.on('swiperight', (e) => {
			isDel.value = false;
		});
	};

	onMounted(() => {
		nextTick(() => {
			createTouch();
		});
	});
</script>
<template>
	<view class="wrong" :class="{ deleted: hasDeleted }">
		<view class="question" ref="stack" :class="{ del: isDel }">
			<view class="question-area">
				<view>{{ wrong.bankContent }}</view>
				<!-- <rich-text :nodes="wrong.bankContent"></rich-text> -->
				<view>A:{{ wrong.bankAnsOne }}</view>
				<view>B:{{ wrong.bankAnsTwo }}</view>
				<view>C:{{ wrong.bankAnsThree }}</view>
				<view>D:{{ wrong.bankAnsFour }}</view>
			</view>
			<view class="delete" @click="handleDelete(wrong.bankId)"> Delete </view>
		</view>
		<view class="collapse">
			<button class="btn">Collapse</button>
		</view>

		<view class="answer">
			正确答案 ：<text>{{ wrong.bankRightAns }}</text>
		</view>
		<view class="analyze">
			<view class="analyze-title">解析</view>
			<view class="analyze-content">{{ wrong.bankAnalysis }} </view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.wrong {
		width: 100%;
		height: auto;
		transition: 0.25s;

		&.deleted {
			opacity: 0;
			height: 0;
			overflow: hidden;
		}
	}

	.question {
		color: #d4d4d4;
		font-family: 'PINGFANG-MEDIUM';
		font-size: 28rpx;
		font-weight: 400;
		line-height: 36rpx;
		position: relative;

		&.del {
			.question-area {
				margin-left: -140rpx;
			}
		}

		&-area {
			width: 100%;
			position: relative;
			z-index: 10;
			background-color: #000000;
			transition: all 0.25s;
		}
	}

	.collapse {
		width: 100%;
		position: relative;
		margin: 40rpx 0;
		height: 70rpx;
		text-align: right;
	}

	.btn {
		position: absolute;
		right: 0;
		bottom: 0rpx;
		margin: auto;
		width: 218rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #b8cef6;
		font-family: 'PINGFANG-BOLD';
		font-size: 26.16rpx;
		font-style: normal;
		font-weight: 400;
		border-radius: 35rpx;
		border: 2rpx solid #b8cef6;
		background-color: transparent;
	}

	.answer {
		color: #ffffff;
		text-align: center;
		font-family: 'PINGFANG-HEAVY';
		font-size: 34rpx;

		text {
			color: #0d5ada;
			font-size: 40rpx;
		}
	}

	.analyze {
		margin-top: 20rpx;
		width: 100%;

		&-title {
			height: 50rpx;
			color: #c2c3c6;
			text-align: left;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 34rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 50rpx;
			position: relative;
			padding-left: 30rpx;

			&::after {
				content: '';
				position: absolute;
				left: 10rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 8rpx;
				height: 50rpx;
				background-color: #b8cef6;
			}
		}

		&-content {
			margin-top: 20rpx;
			color: #9f9999;
			text-align: left;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 34rpx;
			font-weight: 400;
			text-indent: 2em;
		}
	}

	.delete {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 100%;
		z-index: 1;
		width: 140rpx;
		// height: calc(100% - 80rpx);
		height: 100%;
		background-color: #f56c6c;
		color: #ffffff;
		text-align: center;
		font-family: 'PINGFANG-HEAVY';
		font-size: 28rpx;
		font-weight: 400;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
